<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>二维码收款</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta name="renderer" content="webkit">
    <link href="${pageContext.request.contextPath}/static/css/common.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/plugins/layer/skin/layer.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/plugins/bootstrap-3.3.5/css/bootstrap.min.css"
          rel="stylesheet">
          <link href="${pageContext.request.contextPath}/static/plugins/select2-4.0.0/dist/css/select2.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/plugins/font-awesome-4.3.0/css/font-awesome.min.css"
          rel="stylesheet">
          <link rel="stylesheet" href="${pageContext.request.contextPath}/static/plugins/jquery.time/jquery.timepicker.min.css">
    <script src="${pageContext.request.contextPath}/static/js/jquery-1.11.3.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/plugins/bootstrap-3.3.5/js/bootstrap.min.js"></script>
    <script src="/static/plugins/bootstrap-3.3.5/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/plugins/layer/layer.js" type="text/javascript"></script>
	<script src="${pageContext.request.contextPath}/static/plugins/select2-4.0.0/dist/js/select2.min.js"></script>
	<script src="${pageContext.request.contextPath}/static/plugins/My97DatePicker/WdatePicker.js"
        type="text/javascript"></script>
	<script src="${pageContext.request.contextPath}/static/plugins/jquery.time/jquery.timepicker.min.js"
        type="text/javascript"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/global.js"></script>
	<style type="text/css">
	h3,ol,li{margin:0;padding:0;}
	.wraper{
		padding:0px 0px;
	}
	.content{
		padding:60px 3% 20px;
		overflow:hidden;
	}
	.col-md-1{
		text-align:right;
	}
	.lt{
		float:left;
		width:70%;
		padding-left:30px;
	}
	.rt{
		float:right;
		width:30%;
	}
	.btn{
		width:120px;
		}
	.content .row{
		padding:10px 0;
	}
	.box{
		margin-top:20px;
		border:1px solid #edd28b;
		padding:20px 20px;
		background:#fffdee;
	}
	.box ol{
		padding-left:14px;
		line-height:20px;
	}
	.txt{
		color:#666666;
		font-size:20px;
		padding-left:56px;
	}
	.txt input{
	   display:inline-block;
	   height:30px;
	   margin-right:5px;
	   vertical-align: middle;
	   
	}
	.titles{
		font-size:20px;
		*+font-size:18px;
		color:#333;
		overflow:hidden;
		width:100%;
		padding:5px 20px;
		background:#f8f8f8;
	}
	.titles .span1{
		float: left;
		color:#666666;
		font-size:20px;
	}
	.titles .span2{
		float:right;
	}
	.wraper .btn-info{
		background:#228ded;
		border-color:#228ded;
		width:155px;
		height:34px;
		font-size:16px !important;
		line-height:14px;
		*+line-height:15px;
		font-weight:500 !important;
		outline:none; 
		border-radius: 2px !important;
	}
	.user{
		color:#999 !important;
	}
	input[type="text" i]:disabled{
		background:fafafa;
	}
	</style>
<body>
<div class="wraper">
	 <div class="content "> 
		  <div class="lt">
		  		<p class="txt">指定二维码收款</p>
				  <div style="padding:0 56px;">
				     <p style="color:#999999;font-size:16px;"> 生成指定收款的二维码可以用于直接收款，二维码为永久有效。</p>
				     <p style="padding:30px 0 60px;font-size:16px;">收款方姓名：
						<input style="width:300px;height:34px;border:1px solid #ccc;padding: 6px;" type="text" id="user" class="user" value="${cname}"/>
					</p>
					 <div id="wuye" style="position:relative;top:-30px;display:none;">      如更改了物业公司，需要重新生成二维码请点击<a onclick="goBack()">修改</a>
					 <div style="padding:4px 0">注:修改后已生成二维码的收款名称会更新至最新名</div>
					 </div>
					 
				  	 <p>
					  <input id="ewm" class="btn  btn-info btn-lg" type="button" value="生成二维码"/>
					 </p>
				 	
				  </div>
		  </div>
		  <div class="rt">
		  	<div id="pic1" style="width:205px;height:205px;border:1px solid #ccc;margin:0 auto;text-align:center;line-height:205px;">
		  		二维码区域
		  	</div>
		  	<div style="width:204px;margin:0 auto;text-align:center;line-height:32px;font-size:16px;">
		  		<a href="javascript:void(0)" id="downloadUrl"  onclick="downloadUrl()">下载二维码</a>
		  		<a href="javascript:void(0)"  onclick="copyUrl()">复制链接</a>
		  	</div>
		  </div>
	 </div>
	 <!-- 重要！作为复制链接的辅助 -->
	 <input type="text" value="" id="pas" style="opacity: 0;filter: alpha(opacity=0);"/>
</div>
<script type="text/javascript">
var index=parent.layer.index;
parent.layer.style(index,{
	height:420
})
var sid='${sid}';
var url='${url}';
if(sid!=''){
	
	goOn(url);
}

	$("#ewm").click(function(){
		var cname = $("#user").val();
		if(cname==''){
			layer.msg("请填写收款方姓名");
			return;
		}
		if(cname.length>50){
			layer.msg("收款方姓名不能超过50字");
			return;
		}
		 $.ajax({
		        type: "POST",
		        url: '${pageContext.request.contextPath}/admin/payQrcode_add.action',
		        data: "cname="+cname,
		        success: function (data) {
		            data = eval("(" + data + ")");
		            if(data.code=='1'){
		            	url = data.url;
		            	$("#ewm").parent().hide();
		    			$("#pic1")[0].innerHTML="<img src='${pageContext.request.contextPath}/admin/common_genQrImg.action?url="+url+"&w=202&h=202' />";
		    			//$("#pic1")[0].innerHTML="<img src='${pageContext.request.contextPath}/static/images/admin/wallet/ewm_03.jpg'/>";
		    			$("#wuye")[0].style.display="block";
		    			$("#user").attr("disabled","disabled");    	
		            }else{
		            	layer.msg(data.msg);	
		            }
		        }
		    });
		 
		 
		/* var val=$("#user").val();
		if(val!=""){
			$("#ewm").parent().hide();
			$("#pic1")[0].innerHTML="<img src='${pageContext.request.contextPath}/static/images/admin/wallet/ewm_03.jpg'/>";
			$("#wuye")[0].style.display="block";
			$("#user").attr("disabled","disabled");
		}else{
			alert("请输入收款人");
		} */
	});

function goOn(url){
	$("#ewm").parent().hide();
	$("#pic1")[0].innerHTML="<img src='${pageContext.request.contextPath}/admin/common_genQrImg.action?url="+url+"&w=202&h=202' />";
	//$("#pic1")[0].innerHTML="<img src='${pageContext.request.contextPath}/static/images/admin/wallet/ewm_03.jpg'/>";
	$("#wuye")[0].style.display="block";
	$("#user").attr("disabled","disabled");   
	//$("#downloadUrl").attr("href","${pageContext.request.contextPath}/admin/common_genQrImg.action?url="+url+"&w=1000&h=1000","_target");
}


function goBack(){
	$("#user").removeAttr("disabled");
	$("#user").removeClass("user");
	$("#ewm").parent().show();
	$("#wuye").hide();
}
function downloadUrl(){
	if(url!=''){
		window.location="${pageContext.request.contextPath}/admin/common_downloadQrImg.action?url="+url+"&w=1000&h=1000";
	}else{
		layer.msg("请先生成二维码")
	}
	
}

function copyUrl(){
	if(url!=''){
		var urls = url;
		//在点击目标的后面添加一个input（设置成透明） 把要复制的内容设置成input的value,然后再复制这个input的value值
		var Url2=document.getElementById("pas");

		Url2.value = urls;

		Url2.select(); // 选择对象
		
		document.execCommand("Copy"); // 执行浏览器复制命令

		layer.msg("已复制");
	}else{
		layer.msg("请先生成二维码")
	}
}


</script>
</body>
</html>
